<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>报表汇总查询</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <link href="./source/css/element-ui@2.4.0.index.css" rel="stylesheet" type="text/css" />
    <style>
        table{
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
            width: 100%;
        }
        .lastTr td{border-bottom:none;}
        .el-table th,.el-table thead{background:#f2f2f2 !important;}
        .el-table td{
            padding:8px 0;
        }
        .no-data{
            border:none !important;text-align:center;
        }
    </style>
</head>
<div id="app" class="asn-history-page">
    <!--<div class="header">
        <div class="base-width">
            <a href="./main.html">
                <img class="logo" src="../source/img/logo.png" alt="" />
            </a>
        </div>
    </div>-->

   <!-- <el-table
            border
            :data="listData"
            style="width: 100%">

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        >编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        >删除</el-button>
            </template>
        </el-table-column>
    </el-table>-->

    <div class="base-width">
        <h1 style="text-align: center">花都项目用款申请表汇总表</h1>

        <el-form :inline="true" :model="formData" ref="form" class="form" style="margin-top:50px;">
            <el-form-item label="选择日期">
                <el-date-picker
                    v-model="formData.createdate"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    clear-icon="el-icon-error"
                    placeholder="开始日期">
                </el-date-picker>
                <span>至</span>
                <el-date-picker
                    v-model="formData.enddate"
                    format="yyyy-MM-dd"
                    clear-icon="el-icon-error"
                    value-format="yyyy-MM-dd"
                    placeholder="截止日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item class="search-form-item">
                <el-button type="primary" class="search-btn" @click="onSearch('form')">查询</el-button>

                <el-button class="download-btn" @click="exportExcel">
                    导出EXCEL
                </el-button>
            </el-form-item>
        </el-form>

        <div class="download-box">

        </div>

        <div class="history-list">
            <table style="width:100%" class="el-table__body el-table  el-table--border el-table--enable-row-hover el-table--enable-row-transition">
                <thead>
                    <tr>
                        <th><div class="cell">流程名称</div></th>
                        <th><div class="cell">待办流程</div></th>
                        <th><div class="cell">完成</div></th>
                        <th><div class="cell">未完成</div></th>
                        <th style="border-right:none;"><div class="cell"> 退回</div></th>
                    </tr>
                </thead>
                <tbody v-for="(col,colIndex) in listData" :key="colIndex" v-if="listData.length > 0 ">
                    <tr>
                        <td colspan="5" style="border-right:none;text-align: center" v-if="col.length > 0">
                            <div class="cell"><b>{{col[0].Period}}</b></div>
                        </td>
                    </tr>
                    <tr v-for="(tr,index) in col" :key="index" :class="(colIndex == listData.length -1) && (index == col.length -1) ? 'lastTr' : ''">
                        <td><div class="cell">{{tr.WorkName}}</div></td>
                        <td><div class="cell">{{tr.total}}</div></td>
                        <td><div class="cell">{{tr.Complete}}</div></td>
                        <td><div class="cell">{{tr.UnComplete}}</div></td>
                        <td style="border-right:none;"><div class="cell">{{tr.Return}}</div></td>
                    </tr>
                </tbody>
                <tbody v-else>
                    <tr>
                        <td colspan="4" class="no-data">
                            <span>暂无数据</span>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>

        <div class="pages" v-if="pageTotal > pageInfo.pagecount" style="text-align: right;margin:30px 20px 0 0;">
            <el-pagination
                    background
                    @current-change="currentChange"
                    layout="prev, pager, next, jumper, ->"
                    :current-page="formData.pageindex"
                    :page-size="pageInfo.pagecount"
                    :total="pageTotal">
            </el-pagination>
        </div>

    </div>
</div>

<script src="./source/js/lib/vue.min.js"></script>
<script src="./source/js/lib/jquery.min.js"></script>
<script src="./source/js/lib/element-ui@2.4.0.index.js"></script>
<script src="./source/js/common.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data : {
            formData: {
                "createdate":"",				    /*创建日期*/
                "enddate":"",				    /*截至日期*/
                "pageindex":1,				           /*页码*/
                "account":user.account,		   /*账套实例*/
                "pagecount":pageInfo.pagecount
            },
            pageTotal:1,
            listData: []
        },
        methods:{
            apiGetList:function(){
                var _this = this;
                $.ajax({
                    url:apiUrl+'/RptSumQuery',
                    type:'GET',
                    data:{'json':JSON.stringify(_this.formData)},
                    //dataType :'jsonp',
                    success:function(datas){
                        if(datas.Success===true){
                            _this.listData = datas.ArrayLists ;
                            _this.pageTotal = datas.Count;
                        }else{
                            datas.Msg &&  _this.$message.error(datas.Msg);
                        }

                        // _this.listData = datas.OrderLists;
                    },
                    error:function(datas){
                        // console.log(datas)
                        datas.Msg && _this.$message.error(datas.Msg);
                    }
                });
            },
            arraySpanMethod:function({row, column, rowIndex, columnIndex}) {
                    if (columnIndex === 0) {
                        return [1,1];
                    } else if (columnIndex === 1) {
                        return [0, 0];
                    }
            },
            currentChange:function(cur){
                console.log(cur)
                var _this = this;
                this.formData.pageindex = cur;
                this.$nextTick(function(){
                    _this.apiGetList();
                })
            },
            onSearch:function() {
                var _this = this;

                if(this.formData.createdate && this.formData.enddate){
                    var sTime = new Date(this.formData.createdate.replace(/-/g,'/')).getTime();
                    var eTime = new Date(this.formData.enddate.replace(/-/g,'/')).getTime();
                    if( sTime > eTime){
                        this.$message.error('截止日期必须大于等于开始日期');
                        return false;
                    }
                }
                this.formData.pageindex = 1;
                this.$nextTick(function(){
                    _this.apiGetList();
                })
            },
            exportExcel:function(){
                window.location.href = apiUrl2+'/RptSumExport?json='+encodeURIComponent(JSON.stringify(this.formData));
            },
        },
        created:function(){
            this.apiGetList()
            /*this.listData = [
                [
                    {
                        "Period":"第一组",
                        "WorkName":111,
                        "Complete":222,
                        "UnComplete":333,
                        "Return":444,
                    },
                    {
                        "Period":"第一组",
                        "WorkName":111,
                        "Complete":222,
                        "UnComplete":333,
                        "Return":444,
                    },
                ],
                [
                    {
                        "Period":"第2组",
                        "WorkName":111,
                        "Complete":222,
                        "UnComplete":333,
                        "Return":444,
                    },
                    {
                        "Period":"第2组",
                        "WorkName":111,
                        "Complete":222,
                        "UnComplete":333,
                        "Return":444,
                    },
                ]
            ];*/
        }
    })
</script>
</body>
</html>